<template>
    <section id="cicd-item-detail">
        <el-row>
            <el-col :span="4" style="margin-right: 10px;">

                <div style="margin-bottom: 10px">
                    <el-link  :href="'#/deploy/items'  "  :underline="false" style="color: #5c3566;font-size: 15px"><i class="fa fa-arrow-circle-up" style="color: green"></i>  返回面板</el-link>
                </div>
                <div style="margin-bottom: 10px">
                    <el-link :href="'#/deploy/item/' + itemData.name + '/detail' "  :underline="false" style="color: #5c3566;font-size: 15px"><i class="fa fa-search" style="color: #6699FF"></i>  状态</el-link>
                </div >

                <div style="margin-bottom: 10px">
                    <el-link  :href="'#/deploy/item/' + itemData.name + '/workspace' "  :underline="false" style="color: #5c3566;font-size: 15px"><i class="fa fa-folder" style="color: #6699FF"></i>  工作空间</el-link>
                </div >
                <div style="margin-bottom: 10px">
                    <el-link   :underline="false" style="color: #5c3566;font-size: 15px" @click="buildNow();return false"><i class="fa fa-play-circle" style="color: darkred" ></i>  立即构建</el-link>

                </div >
                <div style="margin-bottom: 10px">
                    <el-link   :underline="false" style="color: #5c3566;font-size: 15px" disabled><i class="fa fa-ban" style="color: red"></i>  禁用项目</el-link>
                </div>
                <div style="margin-bottom: 10px">
                    <el-link   :underline="false" style="color: #5c3566;font-size: 15px" @click="deleteItem();return false"><i class="fa fa-trash-o" style="color: red"></i>  删除项目</el-link>
                </div>
                <div style="margin-bottom: 10px">
                    <el-link  :href="'#/deploy/item/' + itemData.name + '/config' "  :underline="false" style="color: #5c3566;font-size: 15px"><i class="fa fa-edit" style="color: #FF9933"></i>  配置</el-link>
                </div>
                <div style="margin-bottom: 10px">
                    <el-link   :underline="false" style="color: #5c3566;font-size: 15px" disabled><i class="el-icon-edit" style="color: #FF9933" ></i>  重命名</el-link>
                </div>
                <el-collapse  style="margin-top: 30px" v-model="activeNames">

                    <el-collapse-item title="构建历史" name="1">
                        <template slot="title">
                            <i class="header-icon el-icon-time" style="margin-left: 5px;color: blue"></i> &nbsp;构建历史
                        </template>
                        <el-table

                                :data="buildHistoryTable.slice((currpage - 1) * pagesize, currpage * pagesize)"
                                :show-header="false"
                                :row-style="rowStyle"
                                cell-style="padding:0"
                                style="margin-top: 10px"
                        >
                            <el-table-column
                                    prop="status"
                                    label="status"
                                    width="30"
                            >
                                <template slot-scope="scope">
                                    <!--<el-tag :type="scope.row.laststatus=='成功'? 'success': 'danger'"  :style="scope.row.laststatus=='成功'? 'color:green': 'color:red'" size="mini">{{ scope.row.laststatus }}</el-tag>-->
                                    <div v-if="scope.row.status==='成功'">
                                        <el-tooltip class="item" effect="light" content="成功" placement="right">
                                            <i class="fa fa-circle" style="font-size:10px;color: green"></i>
                                        </el-tooltip>
                                    </div>
                                    <div v-else-if="scope.row.status==='失败'">
                                        <!--<el-tag type="danger"  size="mini"> {{scope.row.laststatus}} </el-tag>-->
                                        <el-tooltip class="item" effect="light" content="失败" placement="right">
                                            <i class="fa fa-circle" style="font-size:10px;color: #FF5050"></i>
                                        </el-tooltip>
                                    </div>
                                    <div v-else-if="scope.row.status==='构建中'">
                                        <!--<el-tag type="danger"  size="mini"> {{scope.row.laststatus}} </el-tag>-->
                                        <el-tooltip class="item" effect="light" content="构建中" placement="right">
                                            <i class="el-icon-loading" style="font-size:10px;color: blue"></i>
                                        </el-tooltip>
                                    </div>


                                    <div v-else>
                                        <el-tooltip class="item" effect="light" content="未构建" placement="right">
                                            <i class="fa fa-circle" style="font-size:10px;color: gray"></i>
                                        </el-tooltip>
                                    </div>
                                </template>
                            </el-table-column>
                            <el-table-column
                                    prop="id"
                                    label="id"
                                    width="50"
                            >
                                <template slot-scope="scope">
                                    <el-button size="mini" type="text" @click="linkToConsoleOutput(scope.$index, scope.row)">#{{scope.row.id}}</el-button>
                                </template>
                            </el-table-column>

                            <el-table-column
                                prop="mdtime"
                                label="mdtime"
                                fit>
                        </el-table-column>
                            <el-table-column
                                    width="30"
                                    >
                                <template slot-scope="scope">
                                    <el-button icon="el-icon-error"  size="mini" type="text" style="color:#FF6600" @click="terminateDeploy" v-if="scope.row.status==='构建中'"></el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                        <el-pagination
                                style="float: right;margin-right: 40px"
                                small
                                layout="pager"
                                :pager-count="5"
                                :page-sizes="[5, 10, 15, 20,50]"
                                :page-size="pagesize"
                                :total="buildHistoryTable.length"
                                @current-change="handleCurrentChange"
                                @size-change="handleSizeChange"
                                :hide-on-single-page="true"
                        >
                        </el-pagination>

                    </el-collapse-item>

                </el-collapse>


            </el-col>
            <el-col :span="19" >

                <div>
                    <span style="font-size: 20px;">部署项目： </span><span style="font-size: 15px;font-weight: bold">{{itemData.name}}</span>
                </div>
                <div v-if="itemData.describe  !== undefined">
                    <p>{{itemData.describe}}</p>
                </div>
                <div v-else>
                    <p>暂无备注</p>
                </div>

                <div style="margin-top: 30px">
                    <div v-if="itemData.laststatus === '成功'">
                        上次构建状态： <el-tag size="small" type="success">{{itemData.laststatus}}</el-tag>
                    </div>
                    <div v-else-if="itemData.laststatus === '失败'">
                        上次构建状态： <el-tag size="small" type="danger">{{itemData.laststatus}}</el-tag>
                    </div>
                    <div v-else>
                        上次构建状态： <el-tag size="small" type="info">尚未构建</el-tag>
                    </div>
                </div>
                <div style="margin-top: 30px">
                    <!--<i class="el-icon-folder-opened" style="font-size: 40px;color: #3a8ee6"></i> -->
                    <i class="el-icon-folder-opened" style="font-size: 40px;color: #3a8ee6"></i><el-link  :href="'#/deploy/item/' + itemData.name + '/workspace' "   style="font-size: 15px">  工作区</el-link>
                </div>


            </el-col>
        </el-row>


    </section>
</template>
<script>
    import { LoadWorkspace,CleanWorkspace,getDeployItem,StartDeploy,LoadOutput,DeleteItem,stopDeploy } from '../../../api/api'
    import VJstree from 'vue-jstree'

    import saveAs from 'file-saver';
    var FileSaver = require('file-saver');

    export default {
        props: {
            deployItem: Object,

        },
        data() {
            return {
                itemData: {},
                activeNames: "1",
                buildHistoryTable:[],
                pagesize: 10,
                currpage: 1,


                bool:true,
                workspaceData: {
                    name: '',
                    workpath: '',
                },
                jstreedata: [],
                defaultProps: {
                    children: 'children',
                    label: 'label'
                }
            }
        },
        methods: {
            cleanWorkspace(){
                //alert(this.workspaceData.workpath)
                let param = {yamlpath: this.workspaceData.workpath}
                CleanWorkspace(param).then((res) => {
                    console.log("the delete result code :" , res.code)
                    if (res.code === 200) {
                        this.$message({
                            type: 'success',
                            message: '清理成功!'
                        });
                        this.$router.push('/deploy/item/'+this.itemData.name+'/detail')

                    }
                })
            },

            lookFile(model) {

                //console.log(node.model.text + ' clicked !')
                console.log(model.path + ' clicked !')
                //alert("look file")
                //this.$emit('watchFile',model.path); 报错无法打开
                console.log(model.path + ' clicked down!')

                this.$emit('watchFile',model.path);
            },
            DownFile(model) {
                let url = "http://127.0.0.1:8088/" + model.path
                let filename = model.text
                FileSaver.saveAs(url,filename)
            },
            getWorkspace(name) {
                let param = {name: name};
                let that = this;
                that.bool = false
                LoadWorkspace(param).then((res) => {
                    //debugger
                    // console.log("..api...")
                    // //console.log(res.dirStruct)
                    // console.log(typeof JSON.parse(res.dirStruct))
                    // console.log(JSON.parse(res.dirStruct))
                    // console.log("...this..")
                    // console.log(typeof  that.jstreedata)
                    // console.log(that.jstreedata)
                    that.jstreedata = JSON.parse(res.dirStruct);

                    //that.jstreedata = JSON.parse(res.dirStruct)
                    // console.log(that.jstreedata)
                    if (that.jstreedata === null) {
                        that.bool = false
                    }else {
                        that.bool = true   //再次初始化
                    }
                })

            },
            // buildNow() {
            //     alert("理解构建")
            // },
            //add new
            loadDeploymentData() {
                let self = this
                let param = {name:self.$route.params.name}
                getDeployItem(param).then((res) => {
                        self.itemData = res.item
                        console.log(self.itemData)
                        self.workspaceData.name = self.itemData.name
                        self.workspaceData.workpath = self.itemData.yamlpath

                        self.getWorkspace(self.itemData.name)
                    }
                )

            },
            buildNow(){
                let self = this
                let row = self.itemData
                // this.getProgressData()   //每次构建都刷新下  是否能异步
                console.log("start deploy row :" , row)
                console.log("start deploy :" , row.name)

                StartDeploy(row).then((res) => {
                    console.log("start result",res)
                    if (res.code===400) {
                        this.$message({
                                message: res.message,
                                type: 'error',
                                duration: 2000,
                            }
                        );
                    }
                })
            },
            getBuildHistory() { //远程加载模板文件
                let self = this
                let param = {name: self.$route.params.name}

                LoadOutput(param).then((res) => {
                        console.log(res)
                        if (res.outputList !== null) {
                            self.buildHistoryTable = res.outputList
                        }

                        // self.currentid = res.outputList[0].id
                        // self.outputData.options = res.outputList
                        // //this.buildpath = res.outputList[0].path
                        //
                        // let uri = "/" + res.outputList[0].path
                        //
                        // console.log("uri is ....." , uri)

                        // LoadTemplateFile(uri).then((res) => {
                        //         console.log(res)
                        //         //this.filedata.content = res
                        //         self.content = res
                        //     }
                        // )

                    }
                )




            },
            rowStyle({ row, rowIndex}) {
                return 'height:10px '
                // return ''
            },
            deleteItem(){
                let self = this
                let param = {name: self.itemData.name,yamlpath: self.itemData.yamlpath}


                this.$confirm('此操作将永久删除该项目, 是否继续?', '警告', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'

                }).then(() => {
                    DeleteItem(param).then((res) => {
                        console.log("the delete result code :" , res.code)
                        if (res.code === 200) {
                            this.$message({
                                type: 'success',
                                message: '删除成功!'
                            });

                            this.$router.push('/deploy/items')


                        }

                    })


                }).catch(() => {

                });

            },

            handleCurrentChange(cpage) {
                this.currpage = cpage;
            },
            handleSizeChange(psize) {
                this.pagesize = psize;
            },
            linkToConsoleOutput(index,row) {
                this.$router.push('/deploy/item/' + this.$route.params.name + '/' + row.id + '/output')
            },
            terminateDeploy() {


                this.$confirm('确定终止构建?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {

                    let param = {name:this.$route.params.name}
                    stopDeploy(param).then((res) => {
                            this.$message({
                                type: 'success',
                                message: '已终止!'
                            });
                        }
                    )


                }).catch(() => {

                });



                // this.$router.go(0) //刷新页面
            },


        },
        created() {
            this.loadDeploymentData()
            this.getBuildHistory()


        },
        components: {
            VJstree
        }

    }
</script>
<style>
    #cicd-item-detail .el-collapse-item__header{
        background-color: #E6E6E6;
        height: 30px;
        border-radius: 8px;
    }

    #cicd-item-detail .bg-card {
        background-color: #FAFAFA;
    }
</style>

